<template>
	<view class="container">
		<u-navbar placeholder @rightClick="go('/pages/content/notification')" @leftClick="go('/pages/location/index')" bg-color="#033787">
			<view slot="left" class="location">
				<u-icon name="map" color="#fff" size="32" style="margin-right: 12rpx;"></u-icon>
				<template v-if="locationStatus === 0">{{$t('location.loading')}}</template>
				<template v-if="locationStatus === 2">{{$t('location.fail')}}</template>
				<template v-if="locationStatus === 1">{{location.address.street}}{{location.address.streetNum}}</template>
			</view>
			<view slot="right">
				<u-icon name="../../static/icon/notification.png" size="32"></u-icon>
			</view>
		</u-navbar>
		<view class="header"></view>
		<view class="banner _card">
			<u-swiper :list="banner" key-name="url" height="320" @click="swiperClick($event, 'banner')"></u-swiper>
		</view>
		<view class="news _card">
			<u-swiper :list="news" :current="newsSwiperIndex" key-name="url" @click="swiperClick($event, 'news')" @change="newsSwiperChange($event, 0)">
			</u-swiper>
			<swiper class="text-swiper" :current="newsSwiperIndex" circular vertical interval="3000" duration="300" @change="newsSwiperChange($event, 1)">
				<swiper-item v-for="(item, index) in news" :key="index" class="text-swiper-item" @click="swiperClick(index, 'news')">
					<view class="title u-line-2">
						<text v-if="item.type" class="type">[{{item.type}}]</text>
						{{item.title}}
					</view>
					<view class="date">{{item.date}}</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="member">
			<view class="addr flex">
				<u-icon name="map" color="#033787" size="24"></u-icon>
				九龍長沙灣永康街7號西港都會中心29樓
				</view>
			<view class="info">
				<text @click="go('/pages/member/info')">{{$t('member.info.id')}}：88794723</text>
				<view class="divider"></view>
				<text @click="go('/pages/integral/index')">{{$t('member.info.integral')}}：984</text>
			</view>
		</view>
		<view class="store-list">
			<view v-for="(item, index) in storeList" :key="index" class="store _card"
				@click="go('/pages/store/index?id=' + item.id)">
				<u-image :src="item.pic" radius="16rpx" show-loading width="208rpx" height="208rpx"></u-image>
				<view class="info">
					<view class="name u-line-1">{{item.name}}</view>
					<view class="trade">{{$t('store.trade')}}{{item.trade}}</view>
					<view class="tags">
						<view v-for="(tag, index) in item.tags" :key="index" class="tag">{{tag}}</view>
					</view>
					<view class="brief u-line-2">{{item.brief}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				locationStatus: 0,
				location: {},
				banner: [{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
					}
				],
				news: [{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						type: '最新咨询',
						title: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字',
						date: '2018-08-08 12:50'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字',
						date: '2018-08-08 12:50'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字',
						date: '2018-08-08 12:50'
					}
				],
				newsSwiperIndex: 0,
				page: 1,
				storeList: [{
						id: 1,
						pic: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: '這是早餐',
						trade: '8:00 - 11:00',
						tags: ['好吃', '配送快'],
						brief: '這是一段分類簡介、這是一段分類簡介、這是一段分類簡介、這是一段分類簡介、這是一段分類簡介、這是一段...'
					},
					{
						id: 2,
						pic: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name: '這是午餐',
						trade: '10:00 - 24:00',
						tags: ['肥牛不错'],
						brief: '這是一段分類簡介、這是一段分類簡介、這是一段分類簡介、這是一段分類簡介、這是一段分類簡介、這是一段...'
					},
				]
			}
		},
		onShow() {

		},
		onReachBottom() {
			console.log(this.page)
		},
		methods: {
			getLocation() {
				uni.getLocation({
					geocode: true,
					success: res => {
						this.locationStatus = 1
						this.location = res
					},
					fail: res => {
						this.locationStatus = 2
					}
				})
			},
			swiperClick(event, type) {
				console.log(event, type)
			},
			newsSwiperChange(event, type) {
				if (type === 1) {
					this.newsSwiperIndex = event.detail.current
				} else {
					this.newsSwiperIndex = event.current
				}
			},
			go(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.location {
		display: flex;
		align-items: center;
		color: #fff;
	}
	
	.header {
		background-color: #033787;
		padding: 0 32rpx;
		border-radius: 0 0 36rpx 36rpx;
		color: #fff;
		height: 320rpx;
	}

	.banner {
		margin-top: -300rpx !important;
		margin-bottom: -8rpx !important;
		height: 320rpx;
	}

	.news {
		margin-top: 32rpx;
		
		.text-swiper {
			margin-top: 24rpx;
			height: 120rpx;
			
			.text-swiper-item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.title {
					font-size: 26rpx;
					color: #0C1626;
					
					.type {
						display: inline;
						color: #E35525;
					}
				}
				
				.date {
					font-size: 20rpx;
					color: #7C8493;
				}
			}
		}
	}

	.member {
		padding: 32rpx;

		.addr {
			color: #033787;
			font-size: 26rpx;
		}

		.info {
			display: flex;
			color: #7C8493;
			font-size: 22rpx;
			height: 52rpx;
			align-items: center;
			align-content: space-between;

			.divider {
				width: 2rpx;
				height: 16rpx;
				background-color: #B4B7BD;
				margin: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.store-list {
		padding-bottom: 24rpx;

		.store {
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			height: 208rpx;

			.info {
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 30rpx;
					color: #0C1626;
					font-weight: 600;
				}

				.trade {
					font-size: 22rpx;
					color: #B9BFCB;
				}

				.tags {
					display: flex;

					.tag {
						font-size: 18rpx;
						border-radius: 4rpx;
						padding: 2rpx 6rpx;
						color: #fff;
						margin-right: 8rpx;
						background-color: #E35525;
					}
				}

				.brief {
					font-size: 22rpx;
					color: #7C8493;
				}
			}
		}
	}
</style>